<template>
  <el-dialog
    title="请选择添加特效类型"
    :width="520"
    :append-to-body="false"
    custom-class="center-detail"
    @close="handleClose"
    v-bind="$attrs"
  >
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item
        label="特效类型"
        prop="chooseEffectType"
        :rules="[{ required: true, message: '特效类型不能为空' }]"
      >
        <el-select v-model="form.chooseEffectType" placeholder="请选择">
          <el-option
            v-for="item in effectType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#0560FD" type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
interface IProps {
  nodeName: string;
}

const props = withDefaults(defineProps<IProps>(), {
  nodeName: '',
});

const emit = defineEmits(['closeHandle']);

const form = ref<any>({
  chooseEffectType: '',
});

const effectType = [
  {
    label: 'cim_particleSystem',
    value: 'cim_particleSystem',
  },
  {
    label: 'fake_particleSystem',
    value: 'fake_particleSystem',
  },
];
const formRef = ref();

function handleClose() {
  emit('closeHandle', false);
}

const save = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      emit('closeHandle', true, form.value.chooseEffectType);
    }
  });
};
</script>

<style lang="less" scoped></style>
